// 定义一个轮播图类
class Carousel {
    constructor(tag) {
        // 获取目标元素
        this.tag = document.querySelector(tag);
        // 获取左右点击按钮
        this.lBtn = this.tag.querySelector(".l_btn");
        this.rBtn = this.tag.querySelector(".r_btn");
        // 获取li列表
        this.list = this.tag.querySelectorAll(".img_box > ul > li");
        // 获取所有li要移动的类名
        this.listClassName = ["list01", "list02", "list03", "list04"];
        // 触发绑定事件
        this.eventFn();
        // 初始化变量
        this.index = 0;
        // 获取上一个初始化变量值
        this.lastIndex = 0;
    };
    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.listClassName[idx];
        });
    };

    // 点击右按钮
    eventFn() {
        this.rBtn.addEventListener("click", () => {
            // 操作数组
            // 添加数组第一个值到最后
            this.listClassName.push(this.listClassName[0]);
            // 删除数字的第一个值
            this.listClassName.shift();
            // li全部重新设置类名
            this.restListFn();

            // // index操作完成之后重新赋值
            // this.lastIndex = this.index;

            // this.index++;
            // // index最大值
            // if (this.index == this.listClassName.length) {
            //     this.index = 0;
            // };

            // // 去除当前li类名
            // this.list[this.lastIndex].classList.remove(this.listClassName[this.lastIndex]);
            // // 添加新类名
            // this.list[this.index].classList.add(this.listClassName[this.index]);
        });

        this.lBtn.addEventListener("click", () => {

        });
    }
}